import React, { useEffect, useState } from 'react';
import {
    Breadcrumb,
    Card,
    Form,
    Input,
    Row,
    Col,
    Select,
    Button,
    message,
} from 'antd';
import { MergeRouteComponentProps } from '../../../../router/types';

import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

import './index.scss';
import { fetchTypeList as fetchExamTypeList } from '../../../../http/exam';
import { fetchList as fetchSubjectList } from '../../../../http/subject';
import {
    addItem,
    fetchTypeList as fetchQuestionTypeList,
} from '../../../../http/question';

interface IProps extends MergeRouteComponentProps {}

const QuestionAdd: React.FC<IProps> = () => {
    /**
     * 试题题干（标题）
     */
    const [title, setTitle] = useState('');

    /**
     * 富文本编辑器
     * 该富文本编辑器的 value 属性必须是一个 editorState 对象
     * 使用 BraftEditor.createEditorState 初始化编辑器的内容
     */
    const [content, setContent] = useState(
        BraftEditor.createEditorState('<p>请输入内容...</p>')
    );

    /**
     * 考试类型列表
     */
    const [examTypeList, setExamTypeList] = useState([]);

    /**
     * 考试类型
     */
    const [etid, setEtid] = useState('');

    /**
     * 课程类型
     */
    const [subjectTypeList, setSubjectTypeList] = useState([]);

    /**
     * 课程
     */
    const [sid, setSid] = useState('');

    /**
     * 试题类型
     */
    const [questionTypeList, setQuestionTypeList] = useState([]);

    /**
     * 课程
     */
    const [qtid, setQtid] = useState('');

    /**
     * 答案
     */
    const [answer, setAnswer] = useState(
        BraftEditor.createEditorState('<p>请输入内容...</p>')
    );

    /**
     * 副作用，远程请求
     */
    useEffect(() => {
        getExamTypeList();
        getSubjectList();
        getQuestionTypeList();
    }, []);

    /**
     * 状态
     * 实际使用时请避免在 onChange 中直接 toHTML，配合节流函数或者在合适的时机使用更恰当
     * @param editorState
     */
    const handleEditorStateChange = (value: any) => {
        // 使用 editorState.toHTML() 实时获取 html
        setContent(value);
    };

    /**
     * 获取考试类型
     */
    const getExamTypeList = async () => {
        const res = await fetchExamTypeList();
        setExamTypeList(res.data.data);
    };

    /**
     * 获取课程
     */
    const getSubjectList = async () => {
        const res = await fetchSubjectList();
        setSubjectTypeList(res.data.data);
    };

    /**
     * 获取考试类型
     */
    const getQuestionTypeList = async () => {
        const res = await fetchQuestionTypeList();
        setQuestionTypeList(res.data.data);
    };

    /**
     * 保存试题
     */
    const save = async () => {
        const res = await addItem(
            title,
            content.toHTML(),
            etid,
            sid,
            qtid,
            answer.toHTML()
        );
        if (res.data.code !== 201) {
            message.error(res.data.message);
            return;
        }
        // 添加成功，提示用户，并清空输入框
        message.success('试题添加成功');
        setTitle('');
        setContent(BraftEditor.createEditorState('<p>请输入内容...</p>'));
        setEtid('');
        setSid('');
        setQtid('');
        setAnswer(BraftEditor.createEditorState('<p>请输入内容...</p>'));
    };

    return (
        <div className="question-add">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">试题管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">添加试题</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 卡片视图 */}
            <Card title="考题信息">
                <Form name="AddForm" layout="vertical">
                    {/* 题干 */}
                    <Form.Item label="题干">
                        <Input
                            placeholder="请输入考题标题，不能超过 20 个字"
                            value={title}
                            onChange={(v) => setTitle(v.target.value)}
                        />
                    </Form.Item>

                    {/* 内容 */}
                    <Form.Item label="内容">
                        <div className="braft-editor-wrapper">
                            <BraftEditor
                                value={content}
                                onChange={handleEditorStateChange}
                            />
                        </div>
                    </Form.Item>

                    {/* 考试类型 */}
                    <Row gutter={60}>
                        <Col span="8">
                            <Form.Item label="请选择考试类型">
                                <Select
                                    value={etid}
                                    onChange={(v: string) => setEtid(v)}
                                >
                                    {examTypeList.map((item: any) => (
                                        <Select.Option
                                            key={item.id}
                                            value={item.id}
                                        >
                                            {item.name}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>

                        {/* 课程 */}
                        <Col span="8">
                            <Form.Item label="请选择课程">
                                <Select
                                    value={sid}
                                    onChange={(v: string) => setSid(v)}
                                >
                                    {subjectTypeList.map((item: any) => (
                                        <Select.Option
                                            key={item.id}
                                            value={item.id}
                                        >
                                            {item.name}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>

                        {/* 试题类型 */}
                        <Col span="8">
                            <Form.Item label="请选择试题类型">
                                <Select
                                    value={qtid}
                                    onChange={(v: string) => setQtid(v)}
                                >
                                    {questionTypeList.map((item: any) => (
                                        <Select.Option
                                            key={item.id}
                                            value={item.id}
                                        >
                                            {item.name}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Form.Item label="答案信息">
                        <div className="braft-editor-wrapper">
                            <BraftEditor
                                value={answer}
                                onChange={(v) => setAnswer(v)}
                            />
                        </div>
                    </Form.Item>
                </Form>

                {/* 提交 */}
                <Button type="primary" block onClick={save}>
                    提交
                </Button>
            </Card>
        </div>
    );
};

export default QuestionAdd;
